<template>
<div class="wrapper">
    <div class="container">
      <div class="row blog">
        <div class="col-md-8">
          <div class="row">
            <div class="col-md-12">
              <!--breadcrumbs start -->
              <ul class="breadcrumb panel">
                <li><router-link to="/"><i class="fa fa-home"></i> 主页</router-link></li>
                <li><router-link to="/article" href="#">文章</router-link></li>
                <li class="active">{{detail.title}}</li>
              </ul>
              <!--breadcrumbs end -->
            </div>
          </div>
          <div class="blog">
            <div class="single-blog">
              <div class="panel">
                <div class="panel-body">
                  <h1 class="text-center mtop35"><a href="#">{{detail.title}}</a></h1>
                  <p class="text-center auth-row">
                    <i class="fa fa-user"></i>&nbsp;&nbsp;<a href="#">{{detail.auth}}</a>  |  <i class="fa fa-eye"></i>&nbsp;&nbsp;{{detail.click}}  | <i class="fa fa fa-clock-o"></i>&nbsp;&nbsp; {{detail.create_at}}
                  </p>
                   <div class="row" style="padding:5px" v-html="detail.content">

                   </div>

                  <div class="blog-tags">
                    TAGS <a href="#">photoshop</a> <a href="#">illustrator</a> <a href="#">adobe</a> <a href="#">theme</a>
                    <div class="pull-right tag-social">
                      <a href="#" class="btn btn-share pull-right">Share</a>

                      <ul class="pull-right">
                        <li>
                          <a href="#">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="col-md-4">
          <div class="panel">
            <div class="panel-body">
              <input type="text" placeholder="文章 搜索" class="form-control blog-search">
            </div>
          </div>
          <div class="panel">
            <div class="panel-body">
              <div class="blog-post">
                <h3>热门 文章</h3>
                <ul>
                  <li v-for="list in hotArticle"><a href="list in hotArticle"><i class="  fa fa-angle-right"></i> {{list.title}}</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel">
            <div class="panel-body">
              <div class="blog-post">
                <h3>文章分类</h3>
                <ul>
                  <li v-for="list in category"><a href="list in hotArticle"><i class="  fa fa-angle-right"></i> {{list.name}}</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel">
            <div class="panel-body">
              <div class="blog-post">
                <h3>时间</h3>
                <ul>
                  <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> May 2016</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-8">
          <div class="panel">
            <form>
              <textarea class="form-control input-lg p-text-area" rows="2" placeholder="Whats in your mind today?"></textarea>
            </form>
            <footer class="panel-footer" style="width: 100%;">
              <button class="btn btn-post pull-right" style="margin-top: 8px;">Post</button>
              <ul class="nav nav-pills p-option">
                <li>
                  <a href="#"><i class="fa fa-user"></i></a>
                </li>
                <li>
                  <a href="#"><i class="fa fa-camera"></i></a>
                </li>
                <li>
                  <a href="#"><i class="fa  fa-location-arrow"></i></a>
                </li>
                <li>
                  <a href="#"><i class="fa fa-meh-o"></i></a>
                </li>
              </ul>
            </footer>
          </div>
        </div>
        <div class="col-md-4"></div>
      </div>
    </div>
</div>
</template>
<style>
  .p-text-area{
    height:100px;
  }
</style>
<script>
  export default {
    data () {
      return {
        detail: [],
        hotArticle: [],
        category: [],
        replys:[],//回复
        imgToole: '?imageView2/1/w/200/h/140/interlace/1',
        id:'',
      }
    },
    mounted: function(){
      this.load.loading(true,'加载中.....')
      this.id = this.$route.params.id;
      var int = /^\d*$/;
      if( !int.test( this.id ) ){
        this.$router.replace( '/' );
      }
      this.getDetail();
      this.getHotArticle();
      this.getHotCategory();
      this.getReply();
//      this.getArticlesCount();
    },
    updated: function(){
      this.load.loading(false,'')
    },
    methods: {
      open( msg, type ) {
        this.$message( {
          message: msg,
          type: type
        } );
      },
      getDetail(){
        this.$http.post( '/home/article/article/get',{id:this.id}).then( function( response ){
          this.load.loading(false,'')
          if( response.data.status ){
            this.detail = response.data.data
          }else{
            open( '数据获取失败', 'warning' )
          }
        }, function( response ){
          open( '数据获取失败', 'warning' )
        } ).bind( this );
      },
      getArticlesCount(){
        this.$http.get( '/home/article/article/count' ).then( function( response ){
          if( response.data.status ){
          }else{
            open( '数据获取失败', 'warning' )
          }
        }, function( response ){
          open( '数据获取失败', 'warning' )
        } ).bind( this );
      },
      getHotArticle(){
        this.$http.get( '/home/article/article/hots' ).then( function( response ){
          if( response.data.status ){
            this.hotArticle = response.data.data
          }else{
            open( '数据获取失败', 'warning' )
          }
        }, function( response ){
          open( '数据获取失败', 'warning' )
        } );
      },
      getHotCategory(){
        this.$http.get( '/home/article/category/gets' ).then( function( response ){
          if( response.data.status ){
            this.category = response.data.data
          }else{
            open( '数据获取失败', 'warning' )
          }
        }, function( response ){
          open( '数据获取失败', 'warning' )
        } );
      },
      getReply(){
        this.$http.post( '/home/article/reply/gets',{id:this.id}).then( function( response ){
          if( response.data.status ){
            this.replys = response.data.data
            console.log(this.replys);
          }else{
            open( '数据获取失败', 'warning' )
          }
        }, function( response ){
          open( '回复获取失败', 'warning' )
        } ).bind( this );
      },
    }
  }
</script>